<template>
    <div >
        <common-header>
            <template v-slot:title>
                用户注册
            </template>
            <template v-slot:extra>
                <router-link to="/login">
                     <el-link>已有账号? 请登录</el-link>
                </router-link>  
            </template>
        </common-header>
        
        <div style="display:flex;align-items: center;flex-wrap:wrap;justify-content:center;">
          
        <el-divider></el-divider>
        <el-card v-if="choose" class="box-card">
            <el-button   @click="cle">点击取消跳转 </el-button>
          </el-card>
            <el-form style="width:500px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input  v-model="ruleForm.username" ></el-input>
                    <el-button type="primary" v-if="ruleForm.username" @click="queryname">测试该用户名是否可用</el-button>
                </el-form-item>
                 <el-form-item label="真实姓名" prop="realname">
                    <el-input  v-model="ruleForm.realname"  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                  <el-form-item label="手机号" prop="checkPhone">
                    <el-input v-model.number="ruleForm.checkPhone"></el-input>
                </el-form-item>
                  <el-form-item label="邮箱" prop="checkEmail">
                    <el-input v-model="ruleForm.checkEmail"></el-input>
                </el-form-item>
                 
                <el-form-item label="生日" prop="date1">
                    <el-date-picker type="date" placeholder="生日" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form> 

</div>
        <el-divider></el-divider>
        <Footer></Footer>
    </div>
</template>

<script>
import http from '@/core/HttpRequest.js'
import CommonHeader from '@/components/CommonHeader'
import Footer from '@/components/Index/Footer'

export default {
    components: {
        CommonHeader,
        Footer
    },

data() {
       var checkPhone = (rule, value, callback) => {
    const phoneReg = /^1[34578]\d{9}$$/
    if (!value) {
      return callback(new Error('电话号码不能为空'))
    }
    setTimeout(() => {
      // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
      // 所以在前面加了一个+实现隐式转换
 
      if (!Number.isInteger(+value)) {
        callback(new Error('请输入数字值'))
      } else {
        if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error('电话号码格式不正确'))
        }
      }
    }, 100)
  }
  var username=(rule ,value ,callback)=>{
    if (!value) {
      return callback(new Error('用户名不能为空'))
    }else{
       callback()
    }
  }
  var checkEmail = (rule, value, callback) => {
    const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    if (!value) {
      return callback(new Error('邮箱不能为空'))
    }
    setTimeout(() => {
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的邮箱格式'))
      }
    }, 100)
  }
  var realname=(rule ,value,callback)=>{
    let reg=/^[\u2E80-\u9FFF]+$/;//Unicode编码中的汉字范围
    if (value && value.length > 0) {
        if(!reg.test(value)){
            callback([new Error('姓名输入不合法')]);
        }else{
            callback();
        }
    }else if(value.length == 0){
        callback();
    } else {
        callback(new Error('姓名输入不合法'));
    }

  }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          checkPhone:'',
          checkEmail:'',
          username:'',
          realname:'',
          date1:''
        },
        clearTime:'',
        choose:'',
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          checkEmail:[
              { validator: checkEmail, trigger: 'blur' }
          ],
          checkPhone: [
                { validator: checkPhone, trigger: 'blur' }
          ],
          username:[
            {validator: username,trigger: 'blur' }
          ],
          realname:[
            {validator: realname,trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
          let datamessage=this.$refs[formName]
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
           http.post('/user/inquire',{'username':this.ruleForm.username}).then(res=>{
            let data=res.data
            if(data.code>0){
                http.post('/user/registered',{
                  'username':datamessage.model.username,
                  'realname':datamessage.model.realname,
                  'password':datamessage.model.pass,
                  'birth':datamessage.model.date1,
                  'email':datamessage.model.checkEmail,
                  'phone':datamessage.model.checkPhone
                }).then(res=>{
                  let m=res.data.data
                  if(m=='success'){

                    this.$message({
                      dangerouslyUseHTMLString: true,
                      duration:2000,
                      message:'<strong style="display: flex; justify-content: flex-start"  > <img style="width: 50px;height:50px;" src="http://116.62.132.74/zccg2.jpg"><span >这个账号就是你的了，快去登录吧,三秒后跳转到登录页面</span></strong>'
                      });
                      this.choose=1
                      this.ticking()
                  }else if(m=='onlyName'){
                    this.$message({
                      dangerouslyUseHTMLString: true,
                      message:'<strong style="display: flex; justify-content: flex-start"  > <span >很抱歉,用户名没抢过别人，被人抢先注册了</span> <img style="width: 50px;height:50px;" src="http://116.62.132.74/bqz1.png"></strong>'
                      });

                  }else{
                    this.$message({
                      dangerouslyUseHTMLString: true,
                      message:'<strong style="display: flex; justify-content: flex-start"  > <img style="width: 50px;height:50px;" src="http://116.62.132.74/zcsb.png"><span >很抱歉，本次注册失败，请重新注册</span></strong>'
                      });
                  }
                  

                })
            }else{
               this.$message({
                  message: '很抱歉,此用户名不能使用',
                  type: 'warning'
                });
            }
          })
          } else {
            console.log(valid);
            return false;
          }
        });
      },
      queryname(){
          http.post('/user/inquire',{'username':this.ruleForm.username}).then(res=>{
            let data=res.data
            if(data.code>0){
               this.$message({
                  message: '恭喜你，此用户名可以使用',
                  type: 'success'
                });
            }else{
               this.$message({
                  message: '很抱歉，这个用户名不能使用',
                  type: 'warning'
                });
            }
          })
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      ticking(){
          this.clearTime= setTimeout(()=>{
            this.choose=''
            this.$router.push('/Login')
          },3000)
      },
      cle(){
        clearTimeout(this.clearTime)
        this.choose=''
      }
      
    }
  }
</script>

<style scoped>

</style>